import React, { Component } from "react";

class App extends Component {
  // constructor() {
  //   super();
  //   this.handleClick = this.handleClick.bind(this);
  // }

  state = {
    count: 10,
    value: "",
  };

  // handleClick() {
  // 默认情况下，this是指向undefined的
  // 如果事件里面用到了this，通常需要将this指向组件实例

  /*
      1. 使用内联bind方法
      让事件里面的this指向bind的参数this
      不推荐使用，因为bind会产生新函数，使得内存增加

      2. 在constructor里面，this.xxx = this.xxx.bind(this);
      比较推荐, 用变量接收了，所以不能导致内存增加
      当组件的事件比较多的时候，写起来会很麻烦

      3. 直接将事件改成箭头函数
      箭头函数的this指向外层
      推荐
    */
  //   console.log(this.state.count);
  // }

  handleClick = () => {
    console.log(this.state.count);
  };

  handleChange(e) {
    console.log(e.target.value);
  }

  render() {
    return (
      <>
        <h2>事件绑定的this指向</h2>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button onClick={this.handleClick}>btn</button>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
      </>
    );
  }
}

export default App;
